.web {
    width: 1280px;
    margin: 0 auto;

    header{
        margin-bottom: 5px;
    }
}

.graylinetop {
    height: 38px;
    background-color: #dfdfde;

    span {
        font-size: 14px;
        line-height: 38px;
        margin-left: 157px;
        vertical-align: middle;

        &:nth-child(2) {
            margin-left: 633px;
        }

        &:last-child {
            margin: 0 160px 0 25px
        }
    }


}

.navigation {
    height: 96px;
    font-size: 0;

    img {
        margin-left: 157px;
        margin-top: 5px;
    }
}

.navigation-left {
    display: inline-block;
    vertical-align: top;
}

.navigation-middle {
    width: 201px;
    vertical-align: top;
    height: 96px;
    text-align: center;
    display: inline-block;

    p:first-child {
        font-size: 25px;
        font-weight: bold;
        margin-top: 32px;
        margin-bottom: 4px;
    }

    p:last-child {
        font-size: 14px;
    }
}


.navigation-right {
    display: inline-block;
    vertical-align: top;


    ul {
        margin-left: 138px;
    }

    .navcontent {
        height: 96px;
        width: 77px;
        box-sizing: border-box;

        &:hover {
            background-color: #faf8f8;
            border-bottom: 2px solid #3c9cd3;
        }
    }

    p {
        font-size: 14px;
        font-weight: bold;
        text-align: center;

        &:first-child {
            padding-top: 32px;
        }

        &:last-child {
            margin-top: 8px;
        }

        a {
            color: black;
        }

    }
}

@mixin topimg($nub1, $nub2) {
    width: $nub1;
    height: $nub2;
}

.topimg {
    @include topimg(1280px, 554px);
    box-shadow: 0 5px 5px #deebf1;

    img {
        width: 100%;
        height: 100%;
    }
}

@mixin middlebox {
    width: 315px;
    height: 474px;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
}

@mixin smallbgc($color) {
    height: 168px;
    background-color: $color;
}
.MIDbox{
    background-color: #f6f6f6;
    height: 1145px;
}
.middlebox {
    padding: 72px 147px 0 157px;
    font-size: 0;
    background-color: #f6f6f6;
    
    >div {
        @include middlebox();
        background-color: white;
        box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.5);
        margin-bottom: 3px;

        >p {
            font-size: 16px;
        }

        &:last-child {
            margin-right: 0px;
        }

        .smallbgc {
            position: relative;
            @include smallbgc(#2395cb);
            text-align: center;

            img {
                margin-top: 15px;
            }

            p {
                font-size: 18px;
                color: white;
                margin-top: 14px;
                text-align: center;
            }

            hr {
                display: inline-block;
                width: 106px;
                background-color: white;
                height: 1px;
                border: 0;
                margin-top: 5px;

            }

            .san {
                content: '';
                display: block;
                height: 0;
                width: 0;
                border-top: 21px solid #2395cb;
                border-bottom: 21px solid transparent;
                border-left: 21px solid transparent;
                border-right: 21px solid transparent;
                position: absolute;
                top: 168px;
                left: 50%;
                transform: translate(-50%);
            }

        }
        .smallbgc1 {
            position: relative;
            @include smallbgc(#3ed1a4);
            text-align: center;

            img {
                margin-top: 15px;
            }

            p {
                font-size: 18px;
                color: white;
                margin-top: 14px;
                text-align: center;
            }

            hr {
                display: inline-block;
                width: 106px;
                background-color: white;
                height: 1px;
                border: 0;
                margin-top: 5px;

            }

            .san {
                content: '';
                display: block;
                height: 0;
                width: 0;
                border-top: 21px solid #3ed1a4;
                border-bottom: 21px solid transparent;
                border-left: 21px solid transparent;
                border-right: 21px solid transparent;
                position: absolute;
                top: 168px;
                left: 50%;
                transform: translate(-50%);
            }

        }.smallbgc2 {
            position: relative;
            @include smallbgc(#895ea3);
            text-align: center;

            img {
                margin-top: 15px;
            }

            p {
                font-size: 18px;
                color: white;
                margin-top: 14px;
                text-align: center;
            }

            hr {
                display: inline-block;
                width: 106px;
                background-color: white;
                height: 1px;
                border: 0;
                margin-top: 5px;

            }

            .san {
                content: '';
                display: block;
                height: 0;
                width: 0;
                border-top: 21px solid #895ea3;
                border-bottom: 21px solid transparent;
                border-left: 21px solid transparent;
                border-right: 21px solid transparent;
                position: absolute;
                top: 168px;
                left: 50%;
                transform: translate(-50%);
            }

        }

        >.CeBIT {
            font-size: 16px;
            padding-top: 29px;
            padding-left: 13px;
        }

        >.CeBIT-content {
            width: 315px;
            height: 136px;
            border-bottom: 1px dashed #c4c4c4;

            >div:first-child {
                width: 143px;
                padding-top: 17px;
                padding-left: 11px;
                margin-right: 10px;
                display: inline-block;
            }

            >div:last-child {
                display: inline-block;
                width: 151px;
                height: 137px;
                vertical-align: top;
                padding-top: 11px;
                line-height: 26px;

                p {
                    font-size: 14px;
                }
            }
        }

        >.CeBIT-contentButtom {
            font-size: 14px;
            padding-left: 14px;
            ul{
                margin-top: 19px;
            }
            li {
                position: relative;
                span::before {
                    content: '';
                    width: 5px;
                    height: 5px;
                    border-radius: 50%;
                    display: inline-block;
                    background-color: #2395cb;
                    position: relative;
                    top: -2px;
                    transform: translate(-50%);
                    margin-right: 4px;
                }

                span{
                    line-height: 24px;
                }
            }
        }

        .midpictures{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 46px;

            .midleft{
                margin-top: 45px;
                margin-left: 11px;
            }

            .midright{
                margin-top: 45px;
                margin-right: 11px;
            }
        }

        .MIDpic{
            p{
               font-size: 18px;
                color: #2395cb;
                text-align: center;
                line-height: 36px;

                &:last-child{
                    font-size: 12px;
                    color: black;
                    line-height: 30px;
                }
            }
            .MIDp1{
                margin-top: 24px;
            }
        }

        .Rightcontent{
            text-align: center;
            padding-top: 45px;
            p{
                font-size: 12px;
                line-height: 22px;
                margin-top: 59px;
                text-align: left;
                margin-left: 54px;
            }
        }
    }

}
@mixin liwid($width) {
    width: $width;
}
.About-us{
    width: 1280px;
    height: 605px;
    position: relative;
    .HR{
        height: 150px;
    }
    hr{
        display: inline-block;
        width: 257px;
        background-color: #c9c9c9;
        height: 1px;
        border: 0;
        margin-top: 95px;
        margin-left: 510px;
    }
    .aboutus{
        width: 105px;
        height: 45px;
        background-color: #f6f6f6;
        position: absolute;
        top: 74px;
        left: 50%;
        transform: translate(-50%,-50%);

        p{
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            line-height: 32px;
        }

        p:last-child{
            font-size: 12px;
            color: #cbcbcb;
            line-height: 22px;
        }

    }
    .story-us{
        height: 106px;
        position: relative;
        .HR{
            height: 106px;
        }
        hr{
            display: inline-block;
            width: 257px;
            background-color: #c9c9c9;
            height: 1px;
            border: 0;
            margin-top: 69px;
            margin-left: 510px;
        }
        .storyus{
            width: 105px;
            height: 45px;
            background-color: #f6f6f6;
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translate(-50%,-50%);
    
            p{
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                line-height: 32px;
            }
    
            p:last-child{
                font-size: 12px;
                color: #cbcbcb;
                line-height: 22px;
            }
    
        }
    }
    

    .aboutcontent{
        height: 343px;
        width: 100%;
        background-image: url('../../src/S-bgb.png');
        
        p{
            font-size: 14px;
            line-height: 24px;
            text-align: center;
            margin-bottom: 34px;
            padding-top: 44px;
        }

        .abtuspic{
            height: 167px;
            width: 1040px;
            background-color: white;
            margin: 0 auto;
            position: relative;


            img{
                width: 100%;
                height: 100%;
            }

            li{
                display: inline-block;
                height: 159px;
                margin-right: 10px;
                margin-top: 4px;
            }
            .li1{
                width: 51px;
                overflow: hidden;
                position: relative;
                margin-left: 5px;
                img{
                    width: 248px;
                    position: absolute;
                    left: -197px;
                    top: 2px;
                }
            }

            .li2{
                @include liwid(283px);

            }

            .li3{
                @include liwid(277px);
            }

            .li4{
                @include liwid(282px);
            }

            .li5{
                width: 72px;
                overflow: hidden;
                img{
                    width: 295px;
                }
            }

            
        }
    }
   
}

.Message{
    height: 536px;
    width: 100%;
    padding-top: 52px;
    padding-left: 106px;
    .messageleft{
        width: 431px;
        height: 424px;
        display: inline-block;
        margin-right: 39px;
        .mesleft-top{
            .MLTL{
                width: 140px;
                height: 188px;
                text-align: center;
                display: inline-block;
                border: 1px solid black;
                margin-right: 27px;
                img{
                    margin-top: 6px;
                    margin-bottom: 6px;
                }
                p{
                    font-size: 12px;
                    line-height: 20px;
                }
            }

            .MLTR{
                display: inline-block;
                vertical-align: top;
                img{
                    display: inline-block;
                    margin-right: 14px;
                }

                p{
                    display: inline-block;
                    line-height: 30px;
                    font-size: 14px;
                }
            }
        }

        .mesleft-buttom{
            margin-top: 40px;
        }
    }

    .messageright{
        display: inline-block;
        vertical-align: top;
        ul{
            li{
                margin-bottom: 18px;


                input[type="text"]{
                    display: block;
                    height: 22px;
                    width: 603px;
                    border: 1px dashed #d4d2d2;
                    background-color: #f9f8f8;
                }
                p{
                    font-size: 14px;
                    line-height: 32px;
                }

                textarea{
                    width: 603px;
                    height: 109px;
                    border: 1px dashed #d4d2d2;
                    background-color: #f9f8f8;
                    resize: none;
                }
                

                input[type="button"]{
                    background-color: #3c9cd3;
                    color: white;
                    font-size: 12px;
                    width: 90px;
                    height: 30px;
                    outline: none;
                    border: 0;
                }
            }
        }
    }
}

.buttomup{
    height: 80px;
    background-color: #3c9cd3;
    text-align: center;
    padding-top: 22px;

    img{
        display: inline-block;
        margin-right: 16px;
        vertical-align: top;
    }

    span{
        font-size: 12px;
        color: white;
        vertical-align: top;
        margin-right: 12px;
        line-height: 20px;
    }
    p{
        font-size: 12px;
        color: white;
        margin-top: 24px;
    }
}

.buttomdown{
    height: 23px;
    background-color: black;
    text-align: center;
    padding-top: 12px;
    p{
        font-size: 12px;
        color: white;
        
    }
    
}